import React, { PureComponent } from 'react';
import { Upload, Modal } from 'antd';
import { getFetchHeader }  from '../../utils/request';
import { getConfig } from '../../../config';
import customerRequest from '../../utils/requestUpload';
import styles from './index.less';

const config = getConfig();
let uploadServer;
if(process.env.NODE_ENV === "development"){
  if (config.isMock) {
    uploadServer = config.uploadServer;
  }else{
    uploadServer = `${config.ajaxPrefix}${config.uploadServer}`;
  }
}else{
  uploadServer = config.uploadServer;
}



export default class UploadCustom extends PureComponent {
  constructor(props) {
    super(props);
    this.state={
      previewVisible: false,
      previewImage: '',
    }
  }

  handleCancel = () => this.setState({ previewVisible: false })

  handlePreview = (file) => {
      this.setState({
        previewImage: file.url || file.thumbUrl,
        previewVisible: true,
      });
  }

  handleDownload= (file) =>{

  }

  render() {
    const { onRemove, listType , disabled , ...restProps } = this.props;
    const { previewVisible, previewImage } = this.state;

    return (
      <span className={onRemove===false || disabled===true ? styles.upload_disabled : styles.upload}>
        <Upload
          {...restProps}
          disabled={disabled}
          listType={listType}
          onRemove={onRemove}
          action={uploadServer}
          headers={getFetchHeader()}
          customRequest={customerRequest}
          onPreview={listType ? (listType=="picture-card" ? this.handlePreview : undefined) : undefined}
        />
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </span>
    );
  }



};
